import React , {useState} from 'react';
import './MainBottomChooseCopy.css';
import styled from 'styled-components';
import Scroll from '../../../baseUI/scroll';

export const Topcopy = styled.div `
    position:fixed;
    width:100%;
    top:1.6rem;
    z-index:2;
    background-image: linear-gradient(white);
`;

const MainBottomChooseCopy=(props)=>{
    // display
    const {display, listItems }=props;
    return (
        <Topcopy style={display===0?{display:"none"}:{}}>
            <Scroll
                direction="horizental"
                refresh={true}
            >
                <div className="list">
                    <div className="list-box">
                    {
                        listItems.map((item, index) => {
                            return (
                                <span 
                                    className="list-item"
                                    key={index}
                                    onClick={() => {
                                        handleclick(item)
                                    }}
                                >{item}</span>
                            )
                        })
                    }
                    </div>
                </div>
            </Scroll>
        </Topcopy>
           
    )
}
export default MainBottomChooseCopy;